<template>
  <div class="ListDisplaySet" :class="{pd:!moduleShow}" v-if="isShow">
    <template v-if="moduleShow">
      <div>
        <P>{{$t('listDisplaySet.showFields')}}：<span class="grey">（{{$t('listDisplaySet.dragOrder')}}）</span></P>
        <draggable v-model="showConfig.fields" :options="dragOption">
          <span v-for="(item, index) in showConfig.fields" :key="item.key+index" class="sig">
            <i class="iconfont icon-liebiao1"></i>
            <a-checkbox :checked="item.checked" @change="(e) => changeField(item, e)">
              {{item.value}}
            </a-checkbox>
          </span>
        </draggable>
      </div>
      <div v-if="showConfig.searchFields">
        <P>{{$t('listDisplaySet.showSelectes')}}：<span class="grey">（{{$t('listDisplaySet.dragOrder')}}）</span></P>
        <draggable v-model="showConfig.searchFields" :options="dragOption">
          <span v-for="(item, index) in showConfig.searchFields" :key="item.id+index" class="sig">
            <i class="iconfont icon-liebiao1"></i>
            <a-checkbox :checked="item.checked" @change="(e) => changeField(item, e)">
              {{item.name}}
            </a-checkbox>
          </span>
        </draggable>
      </div>
      <div>
        <p>{{$t('listDisplaySet.pageNum')}}{{$t(subtitle)}}{{$t('listDisplaySet.num')}}：</p>
        <a-input-number :placeholder="$t('listDisplaySet.pageNums')" style="width: 320px" type="Number" v-model="max" :min="1" :max="100"/>
      </div>
      <a-button type="primary" ghost class="applyBtn" @click="apply">{{$t('listDisplaySet.apply')}}</a-button>
    </template>
    <P class="btnShow" @click="showField">{{$t('listDisplaySet.viewConfig')}} <a-icon v-if="!moduleShow" type="down" /><a-icon v-if="moduleShow" type="up" /></P>
  </div>
</template>

<script>
import draggable from 'vuedraggable'
import { mapState, mapMutations } from 'vuex'
export default {
  data () {
    return {
      moduleShow: false,
      isShow: false,
      max: '15',
      subtitle: 'common.position',
      dragOption: { animation: 150, ghostClass: 'drag_ghost' }
    }
  },
  components: { draggable },
  created () {
    this.matchPath(this.$route.path)
  },
  watch: {
    $route: {
      handler (val, oldVal) {
        if (val.fullPath !== oldVal.fullPath) {
          this.matchPath(val.path)
          this.moduleShow = false
        }
      }
    }
  },
  computed: {
    ...mapState({
      showConfig: function (state) {
        if (state.listDisplaySet.showConfig && state.listDisplaySet.showConfig.max) {
          this.max = state.listDisplaySet.showConfig.max
        }
        return state.listDisplaySet.showConfig
      }
    }),
    checkedFilter (val) {
      return false
    }
  },
  methods: {
    ...mapMutations('listDisplaySet', ['SET_FIELD']),
    matchPath (path) {
      this.isShow = path === '/resume/candidateApplication' || path === '/position/positionManagement' || path === '/myPosition' || path === '/company/positionManagement' || path === '/resumes/candidateApplication'
      if (path === '/resume/candidateApplication') {
        this.subtitle = 'common.recommend'
      }
    },
    changeField (item, e) {
      item.checked = e.target.checked
    },
    showField () {
      this.moduleShow = !this.moduleShow
    },
    apply () {
      if (String(this.max).indexOf('.') !== -1) {
        this.$message.warning(this.$t('listDisplaySet.pageNumInt'))
        return
      }
      this.showConfig.max = this.max
      this.SET_FIELD(JSON.parse(JSON.stringify(this.showConfig)))
      this.showField()
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '../../styles/var.styl'
.ListDisplaySet
  position relative
  padding 12px 24px
  .sig
    display inline-block
  //   >i
  //     visibility hidden
  // .sig:hover
    // border 1px dashed borderColor
    // >i
    //   visibility visible
  &.pd
    padding 0
    .btnShow
      margin-top 0
    .icon-zhankai
      transform:rotate(7deg)
  p
    margin 6px 0 12px 0
    .grey
      color cccGrey
  .applyBtn
    margin-top 12px
  .btnShow
    margin-top 0
    cursor pointer
    border 1px solid borderColor
    border-top none
    background #f0f2f5
    position absolute
    right 24px
    bottom -38px
    padding 0 6px 4px
    border-bottom-left-radius borderRadius
    border-bottom-right-radius borderRadius
</style>
